<template>
	<view style="height: 100%;">
		<view>
			<u-tabs-swiper ref="uTabs" :list="list1" :current="current" @change="tabsChange" :is-scroll="false"
				swiperWidth="750" active-color="#FF574D"></u-tabs-swiper>
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			style="height: 90%;">
			<swiper-item class="swiper-item" v-for="(item, index) in list1" :key="index">
				<scroll-view scroll-y style="width: 100%;height: 100%;" @scrolltolower="onreachBottom">
					<li v-for="(item,index) in list" :key="index" class="viewItem" v-if="current==0">
						<div class="left">
							<p class="name">{{item.rechargeSource|typeFilter}}</p>
							<p class="time">{{item.rechargeTime|timeFilter}}</p>
						</div>
						<div class="right">
							<p>+{{item.ownMoney}}</p>
						</div>
					</li>
					<li v-for="(item,index) in costList" :key="index" class="viewItem" v-if="current==1">
						<div class="left">
							<p class="name">{{item.costType|typeFilter1}}</p>
							<p class="time">{{item.insdt|timeFilter}}</p>
						</div>
						<div class="right">
							<p>-{{item.costRecharge}}</p>
						</div>
					</li>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 充值 -->
		<!-- <view>
			<li v-for="(item,index) in list" :key="index" class="viewItem">
				<div class="left">
					<p class="name">{{item.type|typeFilter}}</p>
					<p class="time">{{item.rechargeTime|timeFilter}}</p>
				</div>
				<div class="right">
					<p>+{{item.rechargeMoney}}</p>
				</div>
			</li>
			<uni-load-more :status="status" :content-text="contentText" />
		</view> -->
		<!-- 消费 -->
		<!-- <view>
			<li v-for="(item,index) in list" :key="index" class="viewItem">
				<div class="left">
					<p class="name">{{item.type|typeFilter}}</p>
					<p class="time">{{item.rechargeTime|timeFilter}}</p>
				</div>
				<div class="right">
					<p>+{{item.rechargeMoney}}</p>
				</div>
			</li>
			<uni-load-more :status="status" :content-text="contentText" />
		</view> -->
	</view>

</template>

<script>
	import uniLoadMore from '../../components/uni-load-more/uni-load-more.vue';
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				list1: [{
					name: '充值'
				}, {
					name: '消费'
				}],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				status: 'loading',
				contentText: {
					contentdown: '上拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '没有更多'
				},
				list: [],
				costList: [],
				rows: 20,
				busy: true,
				scroll: 0,
				incomeType: 0,
				prop: 0,
				rowStart: 0,
				isLoadMore: false, //是否加载中
				rowStart1: 0,
				isLoadMore1: false, //是否加载中
				flag: true
			}
		},
		onShow() {
			this.rechargeDiamondHistoryEx();
		},
		// 上拉加载更多,onReachBottom上拉触底函数
		onReachBottom: function() {
			if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
				this.isLoadMore = true
				this.rowStart++
				this.rechargeDiamondHistoryEx();
			}

		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
				if (this.current == 1 && this.flag) {
					this.costDiamondHistoryEx()
					this.flag = false
				}
			},
			// scroll-view到底部加载更多
			onreachBottom() {
				if (this.current == 0) {
					if (!this.isLoadMore) { //此处判断，上锁，防止重复请求
						this.isLoadMore = true
						this.rowStart += 20
						this.rechargeDiamondHistoryEx();
					}
				} else {
					if (!this.isLoadMore1) { //此处判断，上锁，防止重复请求
						this.isLoadMore1 = true
						this.rowStart1 += 20
						this.costDiamondHistoryEx();
					}
				}

			},
			rechargeDiamondHistoryEx() {
				this.status = 'loading';

				var data = {
					url: '/web/v2/api/userExtend/rechargeDiamondHistoryEx',
					methods: 'post',
					data: {
						rowStart: this.rowStart,
						rows: this.rows,
						rechargeType: "10"
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						if (res.data.data.rechargeList) {
							this.list = this.list.concat(res.data.data.rechargeList)
							if (res.data.data.rechargeList.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore = true
								this.status = 'nomore'
							} else {
								this.isLoadMore = false
							}
						} else {
							this.isLoadMore = true
							this.status = 'nomore'
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore = false
					}
				})
			},
			costDiamondHistoryEx() {
				this.status = 'loading';

				var data = {
					url: '/web/v2/api/userExtend/costDiamondHistoryEx',
					methods: 'post',
					data: {
						rowStart: this.rowStart1,
						rows: this.rows,
						costType: "10"
					}
				}
				this.$http(data).then(res => {
					if (res.data.code == 21000) {
						if (res.data.data.costList) {
							this.costList = this.costList.concat(res.data.data.costList)
							if (res.data.data.costList.length == 0) { //判断接口返回数据量小于请求数据量，则表示此为最后一页
								this.isLoadMore1 = true
								this.status = 'nomore'
							} else {
								this.isLoadMore1 = false
							}
						} else {
							this.isLoadMore1 = true
							this.status = 'nomore'
						}
					} else { //接口请求失败的处理
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
						this.isLoadMore1 = false
					}
				})
			}
		},
		mounted: function() {

		},

		filters: {
			typeFilter: function(val) {
				var status = '';
				switch (val) {
					case "1":
						status = '充值';
						break;
					case "2":
						status = '宝宝币兑换';
						break;
					case "3":
						status = '红包相关';
						break;
					case "4":
						status = '奖励相关';
						break;
					case "5":
						status = '活动相关';
						break;
					case "6":
						status = '订单退款';
						break;
					case "7":
						status = '游戏大厅';
						break;
					case "8":
						status = '抢唱';
						break;
					default:
						status = '其他';
						break;
				}
				return status;
			},
			typeFilter1: function(val) {
				var status = '';
				switch (val) {
					case "1":
						status = '钻石打赏';
						break;
					case "2":
						status = '订单消费';
						break;
					case "3":
						status = '红包相关';
						break;
					case "4":
						status = '钻石消费';
						break;
					case "5":
						status = '活动消费';
						break;
					default:
						status = '其他';
						break;
				}
				return status;
			},
			timeFilter: function(value) {
				var date
				if (value) {
					if (value.length !== 10) {
						date = new Date(parseInt(value))
					} else {
						date = new Date(parseInt(value * 1000))
					}
					var Y = date.getFullYear() + '-'
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' '
					var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
					var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
					var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
					return Y + M + D + h + m + s
				} else {
					return '——'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.viewItem {
		width: 100%;
		padding: 27upx 0;
		margin: 0 auto 27upx;
		background: #fff;
	}

	.viewItem .top {
		width: 100%;
		height: 67upx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.viewItem .top .name {
		font-size: 37upx;
	}

	.viewItem .bottom {
		width: 100%;
		height: 67upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 0 auto;
		border-top: 3upx solid #ddd;
	}

	.viewItem .bottom .num {
		font-size: 37upx;
	}

	.none {
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%);
		font-size: 37upx;
	}

	.viewItem {
		width: 90%;
		height: 100upx;
		padding-top: 27upx;
		border-bottom: 2upx solid #ddd;
		margin: 0 auto;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
	}

	.viewItem .left .name {
		font-size: 37upx;
	}

	.viewItem .left .time {
		font-size: 27upx;
		color: #999;
	}

	.viewItem .right {
		font-size: 37upx;
		font-weight: bold;
		letter-spacing: 2upx;
	}
</style>
